<template>
  <div id="barrage" ref="barrage"></div>
</template>

<script>
import barragelist from "./barragelist/barragelist.vue";
import { Create } from "./js/Create.js";

export default {
  components: { barragelist },
  name: "barrage",
  data() {
    return {
      timer: null,
    };
  },
  props:{
     barragelist:{
       type:Array
     }
  },
  methods:{
    barragelistshow(){
      for (let x in this.barragelist) {
      ((time) => {
        this.timer = setTimeout(() => {
          if (this.$refs.barrage != undefined) {
            let isLast = false;
            let times = parseInt(time) + 1;
            times == this.barragelist.length
              ? (isLast = true)
              : (isLast = false);
            Create(barragelist, {
              barragekey: this.barragelist[x].key,
              username: this.barragelist[x].username,
              content: this.barragelist[x].content,
              color: this.barragelist[x].color,
              time: this.barragelist[x].time,
              size: this.barragelist[x].size,
              speed: this.barragelist[x].speed,
              clientWidth: this.$refs.barrage.clientWidth,
              isLast: isLast,
            });
          }
        }, 2000 * time);
      })(x);
    }
    }
  },
  mounted() {
    this.barragelistshow();
  },
  destroyed() {
    clearTimeout(this.timer);
  },
  watch: {},
  computed: {},
};
</script>

<style scoped>
#barrage {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>